<template>
    <!-- 原始版本的今天 'uni-calendar-item--isDay': calendar.fullDate === weeks.fullDate && weeks.isDay -->
    <!-- 原始版本的选中 'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay), -->
    <!-- 自定义的异常和正常 'uni-calendar-item--abnormal': weeks.extraInfo && weeks.extraInfo.type == 0,
        'uni-calendar-item--checked': weeks.extraInfo && weeks.extraInfo.type == 1, -->
    <!-- 自定义当前选中 'uni-calendar-item--present':(calendar.fullDate === weeks.fullDate ), -->
	<view class="uni-calendar-item__weeks-box" :class="{
		'uni-calendar-item--disable': weeks.disable,
        'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate),
		'uni-calendar-item--before-checked':weeks.beforeMultiple,
		'uni-calendar-item--multiple': weeks.multiple,
		'uni-calendar-item--after-checked':weeks.afterMultiple }"
	    @click="choiceDate(weeks)">

		<view class="uni-calendar-item__weeks-box-item">
            <!-- 红点 -->
			<!-- <text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> -->
			<text v-if="selected&&weeks.extraInfo" 
                class="uni-calendar-item__weeks-box-circle"
                :style="{background:weeks.extraInfo.type == 0?'#ff5a5f':'#21A5F3',right:weeks.date<10?'0px':'3px'}">
            </text>

       
            <!-- 原始版本的今天 'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,-->
            <!-- 原始版本的选中 'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay), -->
            <!-- 自定义的异常和正常 'uni-calendar-item--abnormal': weeks.extraInfo && weeks.extraInfo.type == 0,
                'uni-calendar-item--checked': weeks.extraInfo && weeks.extraInfo.type == 1, -->
            <!-- 自定义当前选中 'uni-calendar-item--present': (calendar.fullDate === weeks.fullDate), -->
			<text class="uni-calendar-item__weeks-box-text" :class="{
				'uni-calendar-item--isDay-text': weeks.isDay,
                'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate),
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">{{weeks.date}}
            </text>

            <!-- 今天 -->
			<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay&&1==2" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				}">今天
            </text>

            <!-- 农历 -->
			<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">
                {{weeks.isDay?'今天': (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}
            </text>

            <!-- 签到 -->
			<text v-if="weeks.extraInfo&&weeks.extraInfo.info&&1==2" class="uni-calendar-item__weeks-lunar-text" :class="{
				'uni-calendar-item--extra':weeks.extraInfo.info,
				'uni-calendar-item--isDay-text':weeks.isDay,
				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
				'uni-calendar-item--before-checked':weeks.beforeMultiple,
				'uni-calendar-item--multiple': weeks.multiple,
				'uni-calendar-item--after-checked':weeks.afterMultiple,
				'uni-calendar-item--disable':weeks.disable,
				}">{{weeks.extraInfo.info}}
            </text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			weeks: {
				type: Object,
				default () {
					return {}
				}
			},
			calendar: {
				type: Object,
				default: () => {
					return {}
				}
			},
			selected: {
				type: Array,
				default: () => {
					return []
				}
			},
			lunar: {
				type: Boolean,
				default: false
			}
		},

		methods: {
			choiceDate(weeks) {
				this.$emit('change', weeks)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-calendar-item__weeks-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.uni-calendar-item__weeks-box-text {
		font-size: $uni-font-size-base;
		color: $uni-text-color;
	}

	.uni-calendar-item__weeks-lunar-text {
		font-size: $uni-font-size-sm;
		color: $uni-text-color;
	}

	.uni-calendar-item__weeks-box-item {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// width: 100rpx;
		height: 90rpx;
	}

	.uni-calendar-item__weeks-box-circle {
		position: absolute;
		bottom: 5px;
		// right: 3px;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		// background-color: $uni-color-error;
	}

	.uni-calendar-item--disable {
		background-color: rgba(249, 249, 249, $uni-opacity-disabled);
		color: $uni-text-color-disable;
	}

	.uni-calendar-item--isDay-text {
		color: $uni-color-primary;
	}

	.uni-calendar-item--isDay {
		background-color: $uni-color-primary;
		opacity: 0.8;
		color: #fff;
        border-radius: 100%;
	}

	.uni-calendar-item--extra {
		color: $uni-color-error;
		opacity: 0.8;
	}

	.uni-calendar-item--checked {
		// background-color: $uni-color-primary;
		background-color: $uni-color-success;
		color: #fff;
		opacity: 0.8;
        border-radius: 100%;
	}

	.uni-calendar-item--multiple {
		background-color: $uni-color-primary;
		color: #fff;
		opacity: 0.8;
	}
	.uni-calendar-item--before-checked {
		background-color: #ff5a5f;
		color: #fff;
	}
	.uni-calendar-item--after-checked {
		background-color: #ff5a5f;
		color: #fff;
	}

    // 自定义版本的异常
    .uni-calendar-item--abnormal {
		background-color: #ff5a5f;
		opacity: 0.8;
		color: #fff;
        border-radius: 100%;
	}
    // 自定义版本选中
    .uni-calendar-item--present {
		background-color: $uni-color-success !important;
		color: #fff;
		opacity: 0.8;
        border-radius: 100%;
	}
</style>
